<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="warpper">
    <video width="100%" height="100%" style="position: absolute; left: 50%; margin-left: -800.5px; object-fit: fill;" loop="loop" autoplay="autoplay" muted="muted">
        <source src="summer20190515.mp4" type="video/mp4">
    </video>
    <div class="cont">
        <div class="head">
            <div class="container">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <a class="logo navbar-brand" href="#">
                        <img src="img/logo.png" alt="">
                    </a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <form class="form-inline ml-auto" onsubmit="return false">
                        <div class="input-group mb-3">
                            <input type="text" id="ipt" class="form-control" placeholder="邯郸">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" id="button-addon2">搜索</button>
                            </div>
                        </div>
                    </form>
                </nav>
            </div>
        </div>
        <!--天气变化-->
        <div class="main">
            <div class="weather">
                <div class="container wead">
                    <div class="title">
                        <h2 class="mr-auto mb-0">七日天气预报</h2>
                        <div class="more">更多 +</div>
                    </div>
                    <div class="week-all">
                        <ul id="week">
                            <li>
                                <span>今天</span>
                                <span>日期</span>
                                <span>度数</span>
                                <span>天气</span>
                                <span>风向</span>
                                <span>空气优良</span>
                            </li>
                            <li>
                                <span>明天</span>
                                <span>日期</span>
                                <span>度数</span>
                                <span>天气</span>
                                <span>风向</span>
                                <span>空气优良</span>
                            </li>
                            <li>
                                <span>后天</span>
                                <span>日期</span>
                                <span>度数</span>
                                <span>天气</span>
                                <span>风向</span>
                                <span>空气优良</span>
                            </li>
                            <li>
                                <span>周一</span>
                                <span>日期</span>
                                <span>度数</span>
                                <span>天气</span>
                                <span>风向</span>
                                <span>空气优良</span>
                            </li>
                            <li>
                                <span>周二</span>
                                <span>日期</span>
                                <span>度数</span>
                                <span>天气</span>
                                <span>风向</span>
                                <span>空气优良</span>
                            </li>
                            <li>
                                <span>周三</span>
                                <span>日期</span>
                                <span>度数</span>
                                <span>天气</span>
                                <span>风向</span>
                                <span>空气优良</span>
                            </li>
                            <li>
                                <span>周四</span>
                                <span>日期</span>
                                <span>度数</span>
                                <span>天气</span>
                                <span>风向</span>
                                <span>空气优良</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="hour">
                    <div class="container hour">
                        <div class="title">
                            <h2 class="mb-0">分时段预报</h2>
                        </div>
                        <ul class=" mb-0" id="hour">
                            <li>
                                <span>小时</span>
                                <span>度数</span>
                                <span>风向</span>
                                <span>风级</span>
                            </li>
                            <li>
                                <span>小时</span>
                                <span>度数</span>
                                <span>风向</span>
                                <span>风级</span>
                            </li>
                            <li>
                                <span>小时</span>
                                <span>度数</span>
                                <span>风向</span>
                                <span>风级</span>
                            </li>
                            <li>
                                <span>小时</span>
                                <span>度数</span>
                                <span>风向</span>
                                <span>风级</span>
                            </li>
                            <li>
                                <span>小时</span>
                                <span>度数</span>
                                <span>风向</span>
                                <span>风级</span>
                            </li>
                            <li>
                                <span>小时</span>
                                <span>度数</span>
                                <span>风向</span>
                                <span>风级</span>
                            </li>
                            <li>
                                <span>小时</span>
                                <span>度数</span>
                                <span>风向</span>
                                <span>风级</span>
                            </li>
                            <li>
                                <span>小时</span>
                                <span>度数</span>
                                <span>风向</span>
                                <span>风级</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--生活指数-->
            <div class="life">
                <div class="container life p-0 m-0">
                    <div class="title">
                        <h2 class="m-0">生活指数</h2>
                    </div>
                    <div class="life-all">
                        <ul class=" mb-0" id="life-top">
                            <li>
                                <i class="fas fa-tshirt"></i>
                                <span>穿衣指数</span>
                                <span id="drsg"></span>
                            </li>
                            <li>
                                <i class="fas fa-suitcase-rolling"></i>
                                <span>旅游指数</span>
                                <span id="trav"></span>
                            </li>
                            <li>
                                <i class="fas fa-car-alt"></i>
                                <span>洗车指数</span>
                                <span id="cw"></span>
                            </li>
                        </ul>
                        <ul id="life-bot mb-0">
                            <li>
                                <i class="fas fa-sun"></i>
                                <span>紫外线指数</span>
                                <span id="uv"></span>
                            </li>
                            <li>
                                <i class="fas fa-volleyball-ball"></i>
                                <span>运动指数</span>
                                <span id="sport"></span>
                            </li>
                            <li>
                                <i class="fab fa-cloudversify"></i>
                                <span>空气污染指数</span>
                                <span id="air"></span>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>
        </div>
    </div>

</div>


<script src="js/script.js"></script>
</body>
</html>